React Router 学习手册(基础篇)

该手册是基于react-router 和 React Router 使用教程 学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文，

React Router 为 React 提供了一个完整的路由库，它允许你通过 URl 的变化来控制组件的切换与变化

有关 React 全家桶的其余相关文章，可以查看以下链接，会持续更新

• 别眨眼看 React

安装

使用 npm 进行安装：

npm install --save react-router

之后在需要用到的地方进行引用，

// 需要用到 ES6 编译器，比如 babel
import { Router, Route, Link } from 'react-router'

// 不需要使用编译器
var Router = require('react-router').Router
var Route = require('react-router').Route
var Link = require('react-router').Link

当然也可以使用 script 标签进行引用：

<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>

之后可以通过 window.ReactRouter 进行调用

概述

样例概述

当我们想要实现类似信息系统的界面，进入到收件箱选择查看具体信息 1234 的时候，界面路由如下：

path: /inbox/messages/1234

+---------+------------+------------------------+
| About   |    Inbox   |                        |
+---------+            +------------------------+
| Compose    Reply    Reply All    Archive      |
+-----------------------------------------------+
|Movie tomorrow|                                |
+--------------+   Subject: TPS Report          |
|TPS Report        From:    [e-mail]         |
+--------------+                                |
|New Pull Reque|   So ...                       |
+--------------+                                |
|...           |                                |
+--------------+--------------------------------+

应该实现以下几种路由：

URL	Components
/	App -> Home
/about	App -> About
/inbox	App -> Indox
/inbox/messages/:id	App -> Inbox -> Message

使用 react-router 进行实现

// 省略部分组件定义
const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        {/* 使用 `<Link>` 标签进行路由跳转 */}
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

const About = ...;
const Home = ...;

const Inbox = (props) => {
  return (
    <div>
       <h2>Inbox</h2>
       {props.children}
     </div>
  )
}
const IndexStatus = ...;
const Message = ...;

// <Router> 是一个 React 组件
// <Router> 同时也是 <Route> 的一个容器，路由规则使用 <Route> 进行定义
render((
  <Router history={hasHistory}>
    <Route path="/" component={App}>
      {/*
        当我们访问 `/` 的时候不会有加载任何子组件，组件 `<App>` 的 `this.props.children`为 `undefined`，
        所以我们使用 `<IndexRoute>`  来指定默认加载的子组件
      */}
      <IndexRoute compoent={Home} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <IndexRoute component={IndexStatus} />
        { /* 匹配 `/index/messages/123` 路由*/ }
        <Route path="messages/:id" component={Message} />
        { /* 当然我们可以直接匹配 `messages/123`，但不破坏路由组件结构 */}
        <Route component={Inbox}>
          <Route path="messages/:id" component={Message} />
        </Route>
      </Route>
    </Route>
  </Router>
), document.body)

Route 详解

一个路由由三个属性来决定它是否能匹配上 URL:

• 嵌套结构

• Path 属性

• 优先级

嵌套

当一个 URL 被调用，React Router 允许你通过嵌套路由 (Nested routes) 的方式来声明将要被渲染的一系列嵌套组件，嵌套路由是类树状结构 (tree-like structure)，React Router 通过 route config 的顺序去匹配 URL

RouteConfig 是 React Router 内部用来指定 router 顺序的数组

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Route>
</Router>

Path 语法

• :paramName，匹配 URL 的一个部分，直到遇到下一个/、?、#

• ()，表示URL的这个部分是可选的

• *，匹配任意字符(非贪婪模式)，直到模式里面的下一个字符为

• **，匹配任意字符(贪婪模式)，直到下一个/、?、#为止

贪婪模式：在整个表达式匹配成功的前提下，尽可能少的匹配
非贪婪模式：在整个表达式匹配成功的前提下，尽可能多的匹配

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael, 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/hello.html
<Route path="/**/*.jpg">            // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

优先级

React Router 是通过从上到下的顺序匹配路由的，所以应该尽量保证同级路由的第一个路由不会匹配上所有可能的 Path，例如：

<Route path="/comments" ... />  
<Redirect from="/comments" ... /> // 这一条路由规则是不会执行的，以为上一条路由已经匹配了所有路径为 `/comments`

Histories

React Router 构建于 history，简而言之，React Router history 属性用于监听浏览器地址栏的变化，
并将 URL 解析后放入进 location 对象中，给 React Router 提供匹配，

我们使用如下方式从 React Router Package 中引用，

import { browserHistory } from 'react-router'

然后在 <Router> 中使用，

render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

有三种 history 属性类型：

browserHistory

Browser history 是通过 URL 变化来改变路由的，它是背后调用的是浏览器的 History，

但是，使用 Browser history 是需要配置你的服务器

hashHistory

Hash history 使用哈希符 (#) 作为 URL 的一部分，路由通过哈希符的部分进行切换，URL 的形式类似于，example.com/#/some/path，

我该使用 hashHistory 么？

Hash history 不需要你配置服务器即可使用，当你刚刚开始使用 React Router 的时候，就是用它吧，但是一般来说，生产环境下的 web 应用应该使用 browserHistory 来保持 URLs 的整洁度，并且 hashHistory 是不支持服务端渲染的

实际使用当中，我们会发现具体的 URL 可能为 example.com/#/some/path?_k=ckuvup，

所以 ?_k=ckuvup 是垃圾代码什么 ？

当我们使用 web 应用的时候，浏览器记录 (history) 通过 push 或者 replace 来产生变换，浏览器记录会存储一个地址状态 (location state)，但并不会体现在 URL 中，

相关的 API 可以参考 History

而在 DOM API 中，改变 Hash history 的方式仅仅是通过 window.location.hash = newHash，这并没有办法保存地址状态，但是我们希望所有的历史记录都能够使用地址状态，所以我们为每一个地址产生一个独一无二的键值用以表示地址状态，当我们在浏览器中点击后退或者前进的时候，我们就有办法来之前的地址状态了

createMemoryHistory

Memory history 并不会从地址栏中操作或是读取，它能够帮助我们完成服务器端的渲染，或者用于测试以及其他渲染环境 (比如 React Native)，和其他两种方式不一样的是，我们需要在内存中创建 history 对象来使用，

const history = createMemoryHistory(loaction)

Index Routes and Index Links

Index Routes

考虑以下代码，

<Router>
  <Route path="/" component={App}>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

当我们访问 / 的时候不会有加载任何子组件，组件 <App> 的this.props.children 为 undefined，

当然你可以使用 {this.props.children || <Home />} 来定义渲染默认组件，

但 Home 并没有出现在路由当中，所以这样写并不是非常直观，因此可以使用 <IndexRoute> 来指定当指定子组件不存在时加载默认的子组件，

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

Redirect and Index Redirects

我们可以使用 <Redirect> 组件来定义从一个路由自动跳转至另一个路由，

<Route path="inbox" component={Inbox}>
  {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />
</Route>

考虑以下代码，

<Route path="/" component={App}>
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

当我们希望访问 / 的时候自动跳转至 welcome ，即当我们访问跟路由 / 的时候从定向为其他组件，我们可以使用 <IndexRedirect> 组件，

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
  <Route path="about" component={About} />
</Route>

Index Links

当我们想点击一个链接跳转至根路由 / ， 也许我们会这么写

<Link to="/">Home</Link>

实际上它会匹配任何以 / 开始的子路由，

当我们只希望渲染 Home 相关的组件， 我们应该这么写

<IndexLink to="/">Home</IndexLink>

Enter and Leave Hooks

路由组件 (Route) 都拥有 onEnter 和 onLeave 钩子，当一个路由被触发时，进入该路由时触发 onEnter ，离开该路由时触发 onLeave，这两个钩子非常的有用，比如当进入一个路由时，需要先判断时候授权，就会可以使用 onEnter，

在路由跳转过程中，onLeave hook 会在所有将离开的路由中触发，从最下层的子路由开始直到最外层父路由结束，然后 onEnter hook会从最外层的父路由开始直到最下层子路由结束，

回到概述中的例子，如果我们的路由从 /messages/5 跳转到 /about，下面是这些 hook 的执行顺序：

• /messages/:id 的 onLeave

• /inbox 的 onLeave

• /about 的 onEnter

至此基础篇完结，之后我会给大家带来进阶篇，欢迎大家持续关注，

同时如果文章中有任何错误，欢迎大家指出，好的文章需要你的支持，谢谢